<?php
wp_enqueue_script('jquery');
echo '<link href="' . $config ['backendCss'] . 'jquery-ui/jquery-ui-1.8.7.custom.css" rel="stylesheet" type="text/css" />' . "\n";
echo '<link href="' . $config ['backendCss'] . 'style.css" rel="stylesheet" type="text/css" />' . "\n";
echo '<link href="' . $config ['backendCss'] . 'custom.css" rel="stylesheet" type="text/css" />' . "\n";
echo '<script type="text/javascript" src="' . $config ['backendScript'] . 'jquery-1.4.4.js"></script>';

echo '<script type="text/javascript" src="' . $config ['backendScript'] . 'jquery-ui-1.8.7.custom.min.js"></script>';
echo '<script type="text/javascript" src="' . $config ['backendScript'] . 'jquery.validate.pack.js"></script>';
echo '<script type="text/javascript" src="' . $config ['backendScript'] . $config['plugin_name'].'.js"></script>';
echo '<script type="text/javascript" src="' . $config ['backendScript'] . 'ajaxupload.js"></script>';
echo '<script type="text/javascript" src="' . $config ['backendScript'] . 'jquery.ui.tooltip.js"></script>';
echo '<script type="text/javascript" src="' . $config ['backendScript'] . 'jquery.blockUI.js"></script>';
?>
<script type="text/javascript" >
    var progress ="";
    var processing ="";
    var image ="";
    (function($){
        $(document).ready(function(){
            
            jQuery('.stform input').each(function(){
                jQuery(this).focus(function(){
                    jQuery(this).parent().addClass('focus');
                });
                jQuery(this).blur(function(){
                    jQuery(this).parent().removeClass('focus');
                });
            });
            jQuery('.stform textarea').each(function(){
                jQuery(this).focus(function(){
                    jQuery(this).parent().addClass('focus');
                });
                jQuery(this).blur(function(){
                    jQuery(this).parent().removeClass('focus');
                });
            });
            jQuery('.stform select').each(function(){
                jQuery(this).focus(function(){
                    jQuery(this).parent().addClass('focus');
                });
                jQuery(this).blur(function(){
                    jQuery(this).parent().removeClass('focus');
                });
            });
            $("#youtubeForm1").validate({
                errorPlacement: function(error, element) {
                    element.parent().addClass('error');
                },
                submitHandler: function() {
                    jQuery.blockUI({
                            message: jQuery('#loading'),
                            css: {
                            border: 'none',
                            padding: '15px',
                            backgroundColor: '#000',
                            '-webkit-border-radius': '10px',
                            '-moz-border-radius': '10px',
                            opacity: .5,
                            color: '#fff'
                        }
                    });
                    jQuery.post(jQuery("#youtubeForm1").attr('action')+'&ajax=1', jQuery("#youtubeForm1").serialize(),function(data, textStatus){
                        var html = data.split('|**|');
                        $('#youtubeForm2').append(html[0]);
                        $('#youtubeForm2').attr('action',html[1]+'?nexturl=<?php echo admin_url('/admin.php') ?>');                        
                        $("#youtubeForm2").submit();
                        jQuery.unblockUI();
                        parent.top.jQuery("#uploadForm").fadeOut();
                        progress = setInterval ( "ajaxProgressBar()", 500 );
                        parent.top.jQuery("#uploadTitle").html($('#videoUpload').val());
                        parent.top.jQuery("#uploading_container").fadeIn();
                    });
                }

            });

            $("#youtubeForm2").validate({
                errorPlacement: function(error, element) {
                }
            });
            jQuery('.stform input').each(function(){
                jQuery(this).focus(function(){
                    jQuery(this).parent().addClass('focus');
                });
                jQuery(this).blur(function(){
                    jQuery(this).parent().removeClass('focus');
                });
            });
            jQuery('.stform textarea').each(function(){
                jQuery(this).focus(function(){
                    jQuery(this).parent().addClass('focus');
                });
                jQuery(this).blur(function(){
                    jQuery(this).parent().removeClass('focus');
                });
            });
            jQuery('.stform select').each(function(){
                jQuery(this).focus(function(){
                    jQuery(this).parent().addClass('focus');
                });
                jQuery(this).blur(function(){
                    jQuery(this).parent().removeClass('focus');
                });
            });

        });       
        <?php if($uploadStatus == 'done'){?>
        uploadDone();
        <?php }?>
    })(jQuery)    
    
    function ajaxProgressBar(){
        var bar = parent.top.jQuery(".youtube_uploadpercent");
        var statusBar = parent.top.jQuery(".statusUpload");
        var width = parseInt(bar.css('width'))+3;
        width += '%';
        bar.css('width', width);
        statusBar.html(width);
        if(parseInt(bar.css('width')) >= 99){
            //alert(bar.width());
            window.clearInterval(progress);
        }
    }
    function uploadDone(){
        var bar = parent.top.jQuery(".youtube_uploadpercent");
        var statusBar = parent.top.jQuery(".statusUpload");
        bar.css('width', '100%');
        statusBar.html('100%');
        clearInterval ( progress );
        processing = setInterval ( "getImagePreview()", 2000 );
        
    }

    function getImagePreview(){
        jQuery.ajax({
            type: "GET",
            url: "<?php echo home_url("/?page={$config['plugin_name']}&action=getImagePreview&ajax=1&video_id={$videoId}")?>",
            cache: false,
            beforeSend: function(){                
                parent.top.jQuery(".statusProgressing").fadeIn("fast");
            }, //show loading just when link is clicked           
            success: function(data){
                
                image = data.split('|**|');
//                alert(image);
                try{
                    image = eval(image[1]);
                }catch (e){}
                image = image+'';
                
                if (image != 'false'){
                    image = image.split(',');
                    clearInterval ( processing );
                    processing = setInterval ( "checkImageReady()", 2000 );
                    
                    
                }
            }
        });
    }
    var req, warning, imagepath;
    function checkImageReady(){
        parent.top.jQuery(".statusProgressing").html("Processing 50%");
        req = getreq();
	req.onreadystatechange = imagexists;
	req.open("get", image[1], true);
	req.send(null);

    }
    function getreq(){
        if(window.XMLHttpRequest)
            return new XMLHttpRequest();
        else if(window.ActiveXObject)
            return new ActiveXObject("Microsoft.XMLHTTP");
    }
    var percent = 50;
    function imagexists(){
        if(req.readyState == 4)
        {
                if(req.status == 0)
                {
                    for (var i = 0; i< image.length; i++ ){
                        var preview = "<img width='75' height='56' src='"+image[i]+"' alt='' />";
                        
                        parent.top.jQuery("#imgPreview"+(i+1)).html(preview);
                        parent.top.jQuery(".statusProgressing").html("Processing " +'100%');
                        parent.top.jQuery(".statusProgressing").css("background-position", '-16px 50%');
                    }
                    parent.top.jQuery("#addLink").fadeIn();
                    clearInterval ( processing );
                }else{
                    if(percent + 3 <100){
                        percent += percent+3;
                    }else{
                        percent = 99;
                    }
                    parent.top.jQuery(".statusProgressing").html("Processing " +percent+'%');
                }
        }
    }
</script>
<div id="stcontainer">
    <div id="loading">Please Wait...</div>
<form class="stform" enctype="multipart/form-data" action="" name="youtubeForm2" id="youtubeForm2" method="post">
    <ul class="upload_form_field">
        <li>
            <?php //echo home_url("/?page={$config['plugin_name']}&action=getImagePreview&ajax=1&video_id={$videoId}")?>
            <label class=""><?php _e('Video', $config['plugin_name']) ?>:</label>
            <div class="float_left">
                <input class="required" type="file" name="video" id="videoUpload">
            </div>
        </li>
    </ul>
</form>
<form class="stform" id="youtubeForm1" action="<?php echo admin_url('/admin.php?page=' . $config['plugin_name'] . '&action=' . $current_action) ?>" method="post">

    <ul>
        <li>
            <label><?php _e('Upload video for user', $config['plugin_name']); ?>:</label>
            <div>
                <select id="user_id" class="required" name="data[user_id]">
                <?php
                foreach ($users as $user) {
                ?>
                    <option value="<?php echo $user->id?>"><?php echo $user->user_name?></option>
                <?php
                }
                ?>  
                </select>
            </div>
            <br clear="both" />
        </li>
        <li>
            <label><?php _e('Title', $config['plugin_name']); ?>:</label>
            <div>
                <input value="" class="required" name="data[title]" id="id_title" type="text"/>
            </div>
            <br clear="both" />
        </li>
        <li>
            <label><?php _e('Category', $config['plugin_name']); ?>:</label>
            <div>
                <select class="required" name="data[category]">
                    <option value="Autos">Autos &amp; Vehicles</option>
                    <option value="Comedy">Comedy</option>
                    <option value="Education">Education</option>
                    <option value="Entertainment">Entertainment</option>
                    <option value="Film">Film &amp; Animation</option>
                    <option value="Games">Gaming</option>
                    <option value="Howto">Howto &amp; Style</option>
                    <option value="Music">Music</option>
                    <option value="News">News &amp; Politics</option>
                    <option value="Nonprofit">Nonprofits &amp; Activism</option>
                    <option value="People">People &amp; Blogs</option>
                    <option value="Animals">Pets &amp; Animals</option>
                    <option value="Tech">Science &amp; Technology</option>
                    <option value="Sports">Sports</option>
                    <option value="Travel">Travel &amp; Events</option>
                </select>
            </div>
            <br clear="both" />
        </li>
        <li>
            <label><?php _e('Description', $config['plugin_name']); ?>:</label>
            <div>
                <textarea class="required" id="description" name="data[description]" cols="5" rows="5"></textarea>
            </div>
            <br clear="both" />
        </li>
        <li>
            <label><?php _e('Tags', $config['plugin_name']); ?>:</label>
            <div>
                <textarea id="tag" name="data[tag]" cols="5" rows="5"></textarea>
            </div>
            <br clear="both" />
        </li>
        <li>
            <input type="submit" value="Submit" class="button_submit"/>
        </li>
    </ul>
    <input type="hidden" value="" id="id" name="data[id]"/>
    <input type="hidden" value="step1" id="handle" name="handle"/>

    <br clear="both" />
</form>
<br clear="both" />
</div>